<template>
	<view class="">
		<view class="back-top" :style="{ background }">
			<view class="" :style="{ height: height + 'px' }"></view>
			<view class="back-icon-con row ">
				<view class="one-icon" @tap="back"><u-icon name="nav-back" color="#fff" size="44"></u-icon></view>
				<view class="back-top-title">积分兑换</view>
			</view>
		</view>
		<view class="l-top" style="position: relative;" :style="{height:top+'px'}">
			<image src="/static/img/bg66.png" mode="" class="top-img" :style="{height:top+'px'}"></image>
			<view class="l-top-i">
				<view class="l-top-t">积分余额</view>
				<view class="l-top-m">{{integral}}</view>
				<view class="l-top-t" hover-class="hover-opacity" @tap="navTo('/pages/point/pointdetail')">积分明细 〉</view>
				<view class="btn" hover-class="hover-opacity" @tap="navTo('/pages/point/pointorder')">兑换记录</view>
			</view>
		</view>
		<view class="row center p-title">兑换商品</view>
		<view class="" :style="{ top: height+ 44 + 'px' }" :class="{ sticky: fixed }"><mix-tabs :tabs="categoryList" v-model="current" @change="change"></mix-tabs></view>
		<view class="" v-if="fixed" style="height:50px;"></view>
		<view class=""><point-list :list="dataList"></point-list></view>
		<mix-loading v-if="isLoading"></mix-loading>
		<u-back-top icon="/static/img/back-top.png" :scrollTop="scrollTop"></u-back-top>
	</view>
</template>

<script>
import mixTabs from '@/components/mix-tabs/mix-tabs.vue';
import pointList from '@/components/page-item-list/point-list.vue';
export default {
	components: {
		mixTabs,
		pointList
	},
	data() {
		return {
			height: uni.getSystemInfoSync().statusBarHeight,
			top: uni.getSystemInfoSync().statusBarHeight + 154,
			background: 'linear-gradient(128deg, #4E9FC1, #2781A7,.1)',
			activeStyle: {
				color: '#ffffff',
				background: '#2781A7',
				borderRadius: 23
			},
			scrollTop:1200,
			fixed: false,
			integral:0,
			dataList:[],
			categoryList: [],
			current: 0,
			opacity: 1,
			pageNo:1,
			totalPage:1,
			categoryId:""
		};
	},
	onLoad(options) {
		options.integral?this.integral=options.integral:"";
		this.getCategoryList();
	},
	onReachBottom() {
		this.totalPage>this.pageNo?(this.pageNo++,this.loadData()):"";
	},
	onPageScroll(e) {
		this.scrollTop=e.scrollTop;
		if (e.scrollTop) {
			this.background = `linear-gradient(128deg, #4E9FC1, #2781A7)`;
		} else {
			this.background = 'linear-gradient(128deg, #4E9FC1, #2781A7,.1)';
		}
		if (e.scrollTop > 154) {
			this.fixed = true;
		} else {
			this.fixed = false;
		}
	},
	methods: {
		change(index) {
			this.current = index;
			this.pageNo=1;
			this.loadData();
			uni.pageScrollTo({
				scrollTop: 0,
				duration:10
			});
		},
		pullDown(pullScroll) {
			setTimeout(() => {
				this.loadData(pullScroll);
			}, 200);
		},
		async getCategoryList(){
			const res = await this.$request('integral/category-list', {});
			if(res && res.result==0){
				this.categoryList=res.dataList;
				if(res.dataList.length!=0){
					this.categoryId=res.dataList[0].id;
					this.loadData();
				}
			}else{
				this.$util.msg(res.resultNote);
			}
		},
		async loadData() {
			const data = {
				categoryId:this.categoryId,
				pageNo:this.pageNo,
				pageSize:'10'
			};
			const res = await this.$request('integral/goods-list', data, { showLoading: true });
			if(this.pageNo==1) this.dataList=[];
			if(res.result==0){
				this.dataList=this.dataList.concat(res.data.list);
			    this.totalPage=Math.ceil(res.data.count / 10);
			}else{
				this.$uti.msg(res.resultNote);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.sticky {
	position: fixed;
	width: 100%;
	z-index: 999;
}
.p-title {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 40px;
}
.back-top {
	position: fixed;
	top: 0;
	z-index: 99999;
	left: 0;
	width: 100%;
}
.back-icon-con {
	height: 44px;
	padding-left: 24upx;
	position: relative;
}
.back-top-title {
	height: 44px;
	line-height: 44px;
	// margin-right: 94px;
	width: 250rpx;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	font-size: 32upx;
	color: #fff;
}
.top-img {
	width: 100%;
}
.l-top-i {
	position: relative;
	padding:30upx 20upx;
	position: absolute;
	bottom: 0;
	width: 100%;
}
.l-top-t {
	font-size: 24upx;
	color: #c9efff;
}
.l-top-m {
	font-size: 50upx;
	font-weight: bold;
	color: #ffffff;
	padding: 14upx 0;
}
.btn {
	position: absolute;
	right: 0;
	top:30upx;
	width: 133upx;
	line-height: 50upx;
	text-align: center;
	color: #ffffff;
	font-size: 22upx;
	background: #53a4c6;
	border-radius: 25upx 0px 0px 25upx;
}
</style>
